import { defineComponent, ref, defineExpose, computed, watch, reactive, onMounted } from 'vue'
import { addDataSource, testNewDataSource, updateDataSource, editDataSource } from '@/api/source'
import { ElMessage } from 'element-plus'
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    editId: {
      tyep: String,
      default: ''
    }
  },
  emits: ['closeChange'],
  components: {},
  setup(props, { emit, slots }) {
    const data = reactive({
      visible: false
    })
    watch(
      () => props.visible,
      (val) => {
        data.visible = val
      }
    )
    //监听是否为编辑状态
    watch(
      () => props.isEdit,
      (val) => {
        if (val) deitChange()
      }
    )
    const deitChange = () => {
      editDataSource({ id: props.editId })
        .then((res) => {
          const { success } = res
          if (success) {
            Object.assign(form, res.data)
          }
        })
        .catch(() => {})
    }
    //表单绑定数据
    const form = reactive({
      // dbType: '',
      linkName: '',
      dbIp: '',
      dbPort: '',
      dbName: '',
      userName: '',
      passWord: '',
      describes: ''
    })
    // 表单校验规则
    const rules = reactive({
      linkName: [{ required: true, message: '请输入数据源名称', trigger: 'blur' }],
      dbType: [{ required: true, message: '请选择数据源类型', trigger: 'change' }],
      dbIp: [{ required: true, message: '请输入数据库地址', trigger: 'blur' }],
      dbPort: [{ required: true, message: '请输入数据库端口号', trigger: 'blur' }],
      dbName: [{ required: true, message: '请输入数据库名称', trigger: 'blur' }],
      userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
      passWord: [{ required: true, message: '请输入密码', trigger: 'blur' }]
    })
    //提交
    const ruleForm = ref(null)
    const submitForm = () => {
      ruleForm.value.validate((valid) => {
        if (valid) {
          if (props.isEdit)
            updateDataSource({ ...form })
              .then((res) => {
                const { message } = res
                ElMessage({
                  message: message,
                  type: 'success'
                })
                closeChange(true)
              })
              .catch((err) => {})
          else
            addDataSource({ ...form })
              .then((res) => {
                closeChange(true)
              })
              .catch((err) => {})
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
    //测试数据源连接
    const testLink = () => {
      testNewDataSource({ ...form })
        .then((res) => {
          const { success, message } = res
          if (success)
            ElMessage({
              message: message,
              type: 'success'
            })
          else
            ElMessage({
              message: message,
              type: 'warning'
            })
        })
        .catch((err) => {
          alert(err)
        })
    }
    //关闭回调
    const closeChange = (is) => {
      Object.keys(form).forEach((key) => (form[key] = ''))
      emit('closeChange', is)
    }
    onMounted(() => {
      // debugger
    })
    //重置表单
    const resetForm = (ref) => {}
    return () => (
      <>
        <el-dialog
          v-model={data.visible}
          title="添加数据源"
          onClose={closeChange}
          close-on-click-modal={false}
          destroy-on-close={true}
        >
          <el-form ref={ruleForm} model={form} label-width="140px" rules={rules}>
            <el-form-item label="数据源类型">
              <el-select v-model={form.dbType} disabled placeholder="请选择数据源类型">
                <el-option label="MySQL" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数据源名称" prop="linkName">
              <el-input v-model={form.linkName}></el-input>
            </el-form-item>
            <el-form-item label="数据库地址HOST" prop="dbIp">
              <el-input v-model={form.dbIp}></el-input>
            </el-form-item>
            <el-form-item label="端口号" prop="dbPort">
              <el-input v-model={form.dbPort}></el-input>
            </el-form-item>
            <el-form-item label="数据库名" prop="dbName">
              <el-input v-model={form.dbName}></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="userName">
              <el-input v-model={form.userName}></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="passWord">
              <el-input v-model={form.passWord}></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model={form.describes}></el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="danger" onClick={testLink}>
                测试连接
              </el-button>
              <el-button size="small" onClick={resetForm}>重置</el-button>
              <el-button size="small" type="primary" onClick={submitForm}>
                创建
              </el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </>
    )
  }
})
